<template>
  <div>
    <div class="image-container">
      <img src="../assets/images/7.jpg">
    </div>
    <div class="bridegroom-container">
      <p>
        <span class="name">工藤新一</span>
      </p>
      <p>
        <span class="bridegroom">新郎</span>
      </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.image-container {
  margin: 2rem;
  border: 0.25rem dashed blue;
  img {
    position: relative;
    left: 0;
    width: 100%;
    height: 40vh;
    animation: fromLeft 1s ease 1;
  }
}
@keyframes fromLeft {
  from {
    left: -10rem;
    transform: rotate(0deg);
  }
  to {
    left: 0;
    transform: rotate(360deg);
  }
}
.bridegroom-container {
  p {
    span.name {
      position: relative;
      right: 0;
      font-size: 1.5rem;
      animation: fromRight 1s ease 1;
    }
    span.bridegroom {
      color: blue;
      font-size: 2rem;
      font-family: STXinwei;
    }
  }
}
@keyframes fromRight {
  from {
    right: -10rem;
  }
  to {
    right: 0;
  }
}
</style>
